<link rel="stylesheet" href="./css/business/upload.css">
<div class="content">
    <div class="info_panel">
        <div class="info_panel1">
            <span>商品名称<span style="color:#e42121">*</span></span>
            <input type="text" ng-model="goods.name">
        </div>
        <div class="info_panel1">
            <div class="dropdown">
                <div class="dropdown-toggle" data-toggle="dropdown" id="goods_type">
                    <span>商品分类<span style="color:#e42121">*</span></span>
                    <span style="margin-left: 15px;color:#555" ng-bind="goods.type"></span>
                    <i class="iconfont arrow_down pull-right">&#xe621;</i>
                </div>
                <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="goods_type">
                    <li role="presentation" ng-show="business_scope('BS01')">
                        <a role="menuitem" tabindex="-1" ng-click="goods_type_choice('液化气','kg')">液化气</a>
                    </li>
                    <li role="presentation" ng-show="business_scope('BS02')">
                        <a role="menuitem" tabindex="-1" ng-click="goods_type_choice('桶装水','L')">桶装水</a>
                    </li>
                    <li role="presentation" ng-show="business_scope('BS03')">
                        <a role="menuitem" tabindex="-1" ng-click="goods_type_choice('灶具','套')">灶具</a>
                    </li>
                    <li role="presentation" ng-show="business_scope('BS04')">
                        <a role="menuitem" tabindex="-1" ng-click="goods_type_choice('其他')">其他</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="info_panel1">
            <span>商品规格<span style="color:#e42121">*</span></span>
            <input type="text" ng-model="goods.specNum" style="width: 200px;">
            <div class="pull-right dropdown">
                <span ng-show="spec1" ng-bind="goods.spec"></span>
                <i class="iconfont arrow_down dropdown-toggle" id="goods_spec" data-toggle="dropdown"
                   ng-show="spec_show">&#xe621;</i>
                <ul class="dropdown-menu" role="menu" aria-labelledby="goods_spec">
                    <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="goods.spec = '套'">套</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" ng-click="goods.spec = '件'">件</a></li>
                </ul>
            </div>
        </div>
        <div class="info_panel1" ng-show="spec_self == 2">
            <span>请输入商品规格单位<span style="color:#e42121">*</span></span>
            <input type="text" style="width: 100px" ng-model="goods.spec">
        </div>
        <div class="info_panel1">
            <span>商品现价<span style="color:#e42121">*</span></span>
            <input type="text" ng-model="goods.price">
        </div>
        <!--<div class="cut_line"></div>-->
        <!--<div class="info_panel1 pay_way" style="border: 0">-->
        <!--<p>请选择支付方式</p>-->
        <!--<div>-->
        <!--<i class="iconfont" style="color: #e42121">&#xe615;</i>微信支付-->
        <!--</div>-->
        <!--<div>-->
        <!--<i class="iconfont">&#xe615;</i>货到付款-->
        <!--</div>-->
        <!--<div>-->
        <!--<i class="iconfont">&#xe615;</i>支付定金20%，尾款到付-->
        <!--</div>-->
        <!--</div>-->
        <div class="cut_line"></div>
        <div class="info_panel1 img_panel" style="border: 0">
            <p style="color: #555">上传商品展示图片<span style="color:#e42121">*</span></p>
            <div class="row" id="aaa" style="margin: 0 -10px;">
                <div class="col-xs-4">
                    <img src="./img/business/goods_default_img.png" id="preview0" class="previews"
                         onclick="start_upload(0)">
                    <input type="file" id="files0" style="display: none">
                </div>
                <div class="col-xs-4" style="display: none">
                    <img src="./img/business/goods_default_img.png" id="preview1" class="previews"
                         onclick="start_upload(1)">
                    <input type="file" id="files1" style="display: none">
                </div>
                <div class="col-xs-4" style="display: none">
                    <img src="./img/business/goods_default_img.png" id="preview2" class="previews"
                         onclick="start_upload(2)">
                    <input type="file" id="files2" style="display: none">
                </div>
            </div>
        </div>
        <div class="cut_line"></div>
    </div>
    <div class="info_panel1" style="border: 0">
        <span style="color: #555">商品描述</span>
        </br>
        <textarea class="desc_goods" ng-model="goods.desc">
        </textarea>
    </div>

    <div class="submit_btn">
        <button class="btn btn-danger btn-block" ng-click="submit(goods)" ng-show="myBtn == 1">确定</button>
        <button class="btn btn-danger btn-block" ng-click="submit(goods)" ng-show="myBtn == 2">确认上传</button>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!--<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span-->
                        <!--class="sr-only">Close</span></button>-->
                <span class="modal-title" id="myModalLabel">图片裁剪</span>
                <button class="btn btn-danger pull-right" id="save_btn">保存</button>
            </div>
            <div class="modal-body">
                <div class="avatar-wrapper"></div>
            </div>
            <!--<div class="modal-footer">-->
                <!--<button type="button" class="btn btn-primary" id="save_btn">保存</button>-->
            <!--</div>-->
        </div>
    </div>
</div>


<script>
    var img,this_,k=1;
    var URL = window.URL || window.webkitURL;
    var blob0,blob1,blob2;
    var m = 0;
    function start_upload(n) {
        $('#files' + n).click();
        m = n;
    }

    $('input[type="file"]').change(function () {
        this_ = this;
        $('#myModal').modal('show');
        var file = $(this)[0].files[0];
        var imgURL = URL.createObjectURL(file);
        img = $('<img src="' + imgURL + '">');
        $('.avatar-wrapper').empty().html(img);
        setTimeout(function () {
            img.cropper({
                aspectRatio: 3 / 2
            });
        }, 150);
    });

    $('#save_btn').click(function () {
        $('#myModal').modal('hide');
        var imgBase64 = img.cropper('getCroppedCanvas',{
            width:300
        }).toDataURL();
        var blob = convertBase64UrlToBlob(imgBase64);
        var imgURL = URL.createObjectURL(blob);
        $(this_).siblings('img').attr('src', imgURL);
        window['blob'+m] = blob;
        $('#preview'+k).parent().css('display', 'block');
        k++;
    });

</script>
<div id="overlay"></div>